<!--
 * @Author: 曹捷
 * @Date: 2020-11-22 02:13:25
 * @LastEditors: 曹捷
 * @LastEditTime: 2020-11-26 19:25:46
 * @Description: 超级简单的 table。。。
-->
<template>
  <table class="obit-table table-center" border="0" padding="0" v-if="dataList.length>0">
    <tr>
      <th v-for="(item,index) in tableCloums" :key="item.prop" :style="{width:item.width}">{{item.label}}</th>
      <slot name="header"></slot>
    </tr>
    <tr v-for="(item,index) in dataList" :key="index">
      <td v-for="(citem,tindex) in tableCloums" :key="citem.prop+index">
        <span v-if="citem.render" v-html="citem.render(item)" @click="toEvent($event,citem,item)"></span>
        <span v-else>
          {{item[citem.prop] | valueType(item.filterType)}}
        </span>
      </td>
      <slot :row="{item,index}">
      </slot>
    </tr>
  </table>
  <obit-nodata v-else></obit-nodata>
</template>

<script>
export default {
  props: {
    tableCloums: {
      type: Array
    },
    dataList: {
      type: Array

    }
  },
  methods: {
    toEvent (event, item, info) {
      console.log('item: ', item);
      console.log('event: ', event);
      if (item.click) {
        item.click(info, event)
      }
    }
  }

}
</script>

<style>
</style>